<template>
    <div id="app">
        <!--应用程序栏-->
        <v-app id="inspire">
            <div>
                <v-app-bar dark color="#FF5252">
                    <v-list-item-title style="font-size: 20px; text-align: center"
                    >修改密码
                    </v-list-item-title
                    >
                    <v-btn
                            elevation="0"
                            small
                            color="#FF5252 "
                            router-link
                            :to="{ path: '/login' }"
                            style="position:absolute;z-index:100;right:10px"
                    >登录
                    </v-btn
                    >
                </v-app-bar>
            </div>

            <!--填写信息-->
				<div style="padding: 5% 3% 0;"><icon name="warn" scale="2"></icon><span style="margin-left: 3%;">没关系，知道手机号也能找回密码！</span></div>
				<v-card-text style="padding: 5% 10% 0">
                <v-text-field
                        v-model="phone"
                        color="#FF5252"
                        label="手机号"
                        validate-on-blur
                        :rules="[rules.requiredUser, rules.phone]"
                        placeholder=""
                ></v-text-field>
                <!--        图片验证码-->
                <span class="checkImage">
                          <img :src=imageUrl alt="" @click="getRandomNumber()" style="width: 80px;height: 45px">
                </span>
                <v-text-field
                        v-model="imageNumber"
                        color="#FF5252"
                        label="图片验证码"
                        validate-on-blur
                        :rules="[rules.requiredImageCheck,rules.imageCheck]"
                        placeholder=""
                ></v-text-field>
                <span class="checkTest" v-show="flag" @click="check()"
                >获取短信</span
                >
                <span class="checkTest" v-show="!flag">{{ timeText }}</span>
                <v-text-field
                        v-model="checkCode"
                        color="#FF5252"
                        :rules="[rules.requiredCheck, rules.counterCheck]"
                        label="短信验证码"
                        validate-on-blur
                        placeholder=""
                ></v-text-field>

                <v-text-field
                        v-model="password"
                        color="#FF5252"
                        :rules="[rules.requiredPassword, rules.counterPassword]"
                        :append-icon="show ? 'visibility' : 'visibility_off'"
                        :type="show ? 'text' : 'password'"
                        @click:append="show = !show"
                        label="新密码"
                        validate-on-blur
                        placeholder=""
                ></v-text-field>
            </v-card-text>
            <!--注册按钮-->
            <div class="registerButton" style="padding-top: 30px">
                <v-btn
                        block
                        x-large
                        dark
                        color="#FF5252"
                        @click="register"
                        style="font-size: 18px"
                >确认修改
                </v-btn
                >
            </div>
            <v-snackbar v-model="snackbar" bottom :timeout="timeout">
                {{ message }}
            </v-snackbar>
            <v-snackbar v-model="snackbarCheck" bottom :timeout="timeout">
                手机号或图片验证码格式错误
            </v-snackbar>
            <v-overlay :value="overlay">
                <v-progress-circular indeterminate size="64"></v-progress-circular>
            </v-overlay>
        </v-app>
    </div>
</template>

<script>
    // import {Base64} from "js-base64";
    import axios from "axios";

    export default {
        name: "Register",
        data() {
            return {
                flag: true,
                time: 60,
                imageNumber: '',
                timeText: "发送短信",
                snackbar: false,
                timeout: 2000,
                message: "",
                phone: "",
                checkCode: "",
                password: "",
                snackbarCheck: false,
                imageUrl: '',
                show: false,
                random: '',
                overlay: false,
                rules: {
                    requiredUser: value => !!value || "请输入手机账号",
                    requiredPassword: value => !!value || "请输入密码",
                    requiredCheck: value => !!value || "请输入短信验证码",
                    requiredImageCheck: value => !!value || "请输入图片验证码",
                    counterCheck: value => {
                        const pattern = /^[0-9]{6}$/;
                        return pattern.test(value) || "短信验证码为6为数字";
                    },
                    imageCheck: value => {
                        const pattern = /^[a-zA-Z0-9]{4}$/;
                        return pattern.test(value) || "图片验证码格式错误";
                    },
                    counterPassword: value => value.length >= 6 || "至少输入6位密码",
                    checkPassword: value =>
                        value === this.password || "俩次输入密码不一致",
                    phone: value => {
                        const pattern = /^1([345789][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/;
                        return pattern.test(value) || "手机格式错误";
                    }
                }
            };
        },

        methods: {
            // 生成uuid
            getRandomNumber() {
                this.random = (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
                this.imageUrl = "/api/v1.0/image_codes/" + this.random;
            },

            //注册成功进入我的界面
            goMine() {
                this.$router.replace({
                    path: "/main/mine"
                });
            },
            //检测手机号、图片验证码格式并发送短信验证码
            check() {
                const pattern = /^1([345789][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/;
                const pattern_two = /^[a-zA-Z0-9]{4}$/;
                if (!pattern.test(this.phone) || !pattern_two.test(this.imageNumber)) {
                    this.snackbarCheck = !this.snackbarCheck;
                } else {
                    let _this = this;
                    _this.overlay = true;
                    axios
                        .get("/api/v1.0/sms_codes/" + this.phone, {
                            params: {
                                image_code: this.imageNumber,
                                image_code_id: this.random,
                                get_type: "change_pwd"
                            }
                        })
                        .then(function (response) {
                            _this.overlay = false;
                            let timeId;
                            // 设置弹窗
                            // 返回错误图片错误的信息刷新图片验证码
                            if ( response.data.errno === '4301') {
                                _this.flag = !_this.flag;
                                // 每一秒弹出当前的时间提示
                                timeId = setInterval(() => {
                                    if (_this.time === 0) {
                                        _this.time = 60;
                                        _this.flag = !_this.flag;
                                        // 用来停止setInterval()
                                        clearInterval(timeId);
                                    }
                                    _this.time--;
                                    _this.timeText = _this.time.toString() + "S可获取";
                                }, 1000);
                            }
                            else{
                                _this.getRandomNumber();
                            }
                            _this.snackbar = true;
                            _this.message = response.data.errmsg;
                        })
                        .catch(function () {
                            _this.overlay = false;
                            _this.message = "";
                            _this.snackbar = true;
                            _this.message = "连接服务器失败！"
                        });
                }
            },
            //向后端提交用户修改密码信息
            register() {
                if (this.phone === "" || this.checkCode === "" || this.imageNumber === "" || this.password === "") {
                    this.snackbar = true;
                    this.message = "请把参数补充完整！";
                } else if (this.password.length < 6) {
                    this.snackbar = true;
                    this.message = "密码长度过低！";
                } else {
                    let _this = this;
                    _this.overlay = true;
                    axios
                        .put("/api/v1.0/change_pwd", {
                            mobile: this.phone,
                            sms_code: this.checkCode,
                            password: this.password
                        })
                        .then(function () {
                            axios
                                .post("/api/v1.0/login", {
                                    mobile: _this.phone,
                                    password: _this.password
                                })
                                .then(function (response) {
                                    _this.overlay = false;
                                    _this.snackbar = true;
                                    _this.message = response.data.errmsg;
                                    if (response.data.errno === '0') {
                                        // 填坑：第一个需要时方法的地址
                                        setTimeout(_this.goMine, 2);
                                    }
                                })
                                .catch(function () {
                                    _this.overlay = false;
                                    _this.snackbar = true;
                                    _this.message = "连接服务器失败！";
                                });
                        })
                        .catch(function () {
                            _this.overlay = false;
                            _this.message = "";
                            _this.snackbar = true;
                            _this.message = "连接服务器失败！"
                        });
                }
            }
        },
        created() {
            this.getRandomNumber()
        }
    };
</script>

<style scoped>
    .registerButton {
        margin: 0 auto;
        width: 100%;
        padding-left: 30px;
        padding-right: 30px;
    }

    .checkImage {
        float: right;
        padding-top: 0px;
    }

    .checkTest {
        font-size: 15px;
        float: right;
        padding-top: 20px;
    }
</style>
